<template><!--直播-->
    <div class="warp-2" style="height:100%;padding-top: 56px;">
            <navbar :title="$t('find_live')"></navbar>
            <div class="white-bg" style="height: 44px;margin-bottom: 2px; overflow: hidden;">
                <ul class="clearfix bottom-shadow-02 word-btn-list-02">
                    <li class="color666" @click="selectSort('living')" v-bind:class="{'cur':type === '1'}">{{ $t("lab_live_living") }}</li><!--直播中-->
                    <li class="color666" @click="selectSort('notice')" v-bind:class="{'cur':type === '2'}">{{ $t("lab_live_foreshow") }}</li><!--直播预告-->
                    <li class="color666" @click="selectSort('lived')" v-bind:class="{'cur':type === '3'}" style="padding-right: 15px;">{{ $t("lab_live_lived") }}</li><!--往期直播-->
                </ul>
            </div>
            <div style="height: calc(100% - 100px);" class="body-content" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getDataList"
                    >
                        <div class="view-content-box" v-bind:class="{'height100' : total === 0}">
                            <ul v-if="total > 0">
                                <li class="view-body-content" v-for="live in liveList" :key="live.lvId" @click="videoPlayback(live)">
                                    <div class="view-bodyContent-img">
                                        <div class="view-bodyContent-img-mask"></div>
                                        <van-image :src="appUrl + live.lvImage" lazy-load></van-image>
                                        <div class="view-bodyContent-img-body">
                                            <span>{{ live.lvTitle }}</span><!--标题-->
                                            <div class="view-bodyContent-img-body-time">
                                                <div style="float: right;margin-top: 2px;" v-if="type != 'notice'"><i class="people-num-icon-02"></i>{{ live.onlineMembers }}</div><!--参与人数-->
                                                <div style="display:inline-block;" v-if="type != 'lived'">{{ live.lvStartDatetime }} {{ $t("time_to") }} {{ live.lvEndDatetime }}</div><!--开始、结束时间-->
                                                <div style="display:inline-block;" v-if="type === 'lived'">{{ live.lvStartDatetime }} {{ $t("time_to") }} {{  live.lvEndDatetime }}</div><!--回顾直播：真正的开始、结束时间-->
                                            </div>
                                        </div>
                                        <span class="box-color-02 blue" v-if="type === '1'">{{ $t("lab_live_living_now") }}</span><!--正在直播-->
                                        <span class="box-color-02 red" v-if="type === '2'">
                                            <p>{{ $t("label_live_countdown") }}</p><!--倒计时-->
                                            <p>{{ live.time }}</p>
                                        </span>
                                        <span class="box-color-02 green" v-if="type === '3'">{{ $t("lab_live_veiwed") }}</span><!--回顾直播-->
                                    </div>
                                </li>
                            </ul>
                            <!--暂无数据-->
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t('no_data') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <common-loading :isLoading="isLoading"></common-loading>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
            <van-dialog
                v-model="pwdOk"
                show-cancel-button
                :title="pwdType"
                :message="$t('confirm_exit_content_4')"
                :confirmButtonText="$t('sure')"
                :cancelButtonText="$t('cancel')"
                @confirm="submitPwd()"
                @cancel="cancelPed()"
                >
                <div class="confirm-content" style="padding: 0 20px;text-align: center;">
                    <p class="color999" style="font-size: 14px;">{{ $t("label_live_pwd_tips_1") }}</p><!--若不知道密码，请向管理员获取-->
                    <div style="padding: 20px 0 0;"><!--6位数密码-->
                        <input type="text" :placeholder="$t('label_live_pwd_tips_2')" class="input-box-01" v-model="livePwd"/>
                    </div>
                </div>
            </van-dialog>
    </div>
</template>

<script>
/*eslint-disable no-unused-vars*/
import CommonLoading from '@/components/common/loading';
export default {
    name: 'Live',
    components: {
        CommonLoading
    },
    data() {
        return {
            pwdOk: false, //验证密码弹出层
            livePwd: '', //用户输入的密码
            goLivePwd: '', //密码验证
            pwdType: this.$t('label_live_pwd_tips_4'), //请输入密码验证
            currentLiveId: 0, //直播id
            isActive: false, //密码验证错误时需判断添加类名
            isLoading: false,
            pageData: {
                pageNo: 1,
                pageSize: 10,
                sortname: 'lv_start_datetime', // lv_start_datetime 开始时间、 lv_title 直播标题
                sortorder: 'desc'
            },
            total: 0, // 总数
            type: '1', // 闯关类型
            liveList: [],
            status: {
                2: this.$t('live.not_started'),
                1: this.$t('live.in_progress'),
                3: this.$t('live.is_ended')
            },
            itemData: {
                lvDesc: '直播简介', // 直播简介
                lvEncId: '', // 加密后的直播id
                lvEndDatetime: '', // 结束时间
                lvGenseeOnlineUser: 0, // 展示互动在线人数展示互动在线人数
                lvGenseeRecordUrl: '', // 直播回放路径
                lvId: 0, // 直播id
                lvImage: '', // 直播图片
                lvNeedPwd: true, // 是否需要密码才能查看
                lvRealEndDatetime: '2020-12-28 12:00:00', // 直播真正的结束时间
                lvRealStartDatetime: '2020-12-28 09:00:00', // 直播开始时间
                lvStartDatetime: '', // 开始时间
                lvStudentJoinUrl: '', // 学员加入URL
                lvTitle: '直播标题', // 直播标题
                lvType: 1, // 状态 2=未开始（预告）。1=正在直播。3-已结束
                onlineMembers: 0 // 在线人数
            },
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageData.pageNo = 1;
                this.getDataList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        //课程排行排序
        selectSort(type) {
            this.liveList = [];
            this.isLoading = true;
            this.pageData.pageNo = 1;
            this.onFetching = false;
            switch (type) {
            case 'living':
                this.type = '1';
                this.status = 1; //直播中
                break;
            case 'notice':
                this.type = '2';
                this.status = 2; //直播预告
                break;
            case 'lived':
                this.type = '3';
                this.status = 3; //往期直播
                break;
            };
            this.getDataList();
        },
        getDataList(option) {
            this.isLoading = true;
            this.$axios({
                method: 'POST',
                url: '/app/api/trainee/live/list',
                params: this.pageData,
                data: {
                    type: this.type
                }
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.liveList = res.data.results;
                    } else {
                        this.liveList = [...this.liveList, ...res.data.results];
                    }

                    this.noticeTimer();
                };
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageData.pageNo++;
                if (this.liveList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        noticeTimer() { //直播预告的倒计时
            setInterval(() => {
                for (let item in this.liveList) {
                    this.$set(this.liveList[item], 'time', this.getCountdown(this.liveList[item].lvStartDatetime));
                }
            }, 1000);
        },
        getCountdown(time) {
            time = time.substring(0, 19);
            time = time.replace(/-/g, '/');
            let countdownTime;
            let newData = new Date().getTime(); //当前时间
            let startDate = new Date(time).getTime(); //直播开始时间

            if (startDate >= newData) {
                let countdown = startDate - newData;
                let dayTime = Math.floor(countdown / 1000 / 60 / 60 / 24);
                let hourTime = Math.floor((countdown / 1000 / 60 / 60) - (dayTime * 24));
                let minuteTime = Math.floor((countdown / 1000 / 60) - (dayTime * 24 * 60) - (hourTime * 60));
                if (dayTime < 10) {
                    dayTime = '0' + dayTime;
                };
                if (hourTime < 10) {
                    hourTime = '0' + hourTime;
                };
                if (minuteTime < 10) {
                    minuteTime = '0' + minuteTime;
                };
                countdownTime = dayTime + this.$t('lab_day') + ' ' + hourTime + ':' + minuteTime;
                return countdownTime;
            } else {
                countdownTime = '0' + this.$t('lab_day') + ' ' + '00' + ':' + '00';
                return countdownTime;
            }
        },
        videoPlayback(live) {
            this.currentLiveId = this.wbEncryptor(live.lvId);
            if (this.type === '1' || this.type === '2') {
                var needPwd = live.lvNeedPwd;
                var pwd = live.lvPwd;
                var limitPeople = live.lvPeopleNum; //限制人数
                var onlinePeople = live.onlineMembers; //直播中的观看人数
                if (limitPeople > 0 && limitPeople <= onlinePeople) { //不限制人数，并且限制人数小于等于观看人数
                    this.$toast(this.$t('label_live_pwd_tips_3'));
                    return;
                };
                if (needPwd === true) { //需要密码
                    this.pwdOk = true;
                    this.goLivePwd = pwd.replace(/\s+/g, '');
                    return;
                };
                this.vidioPlayJump();
            } else if (this.type === '3') {
                this.vidioPlayJump();
            }
        },
        submitPwd() { //点击确定按钮
            if (this.livePwd === this.goLivePwd) { //密码正确跳转直播地址
                this.vidioPlayJump();
            } else if (this.livePwd === '') {
                this.pwdType = this.$t('label_live_pwd_tips_5'); //密码不能为空
                this.isActive = true;
            } else {
                this.pwdType = this.$t('label_live_pwd_tips_6'); //输入的密码错误
                this.isActive = true;
            }
        },
        cancelPed() { //点击取消按钮
            this.pwdType = this.$t('label_live_pwd_tips_4'); //请输入密码验证
            this.livePwd = '';
            this.isActive = false;
        },
        vidioPlayJump() { //跳转直播地址
            this.$router.push({path: `/live/LiveDetail/${this.currentLiveId}`});
        }
    },
    mounted() {
        this.$store.commit('addKeepAliveList', 'Live');
        this.getDataList();
    },
    activated() {
        this.getDataList('refresh');
    }
};
</script>

<style scoped lang="less">
    .word-btn-list-02 {
        height: 50px;
        overflow-x: scroll;
        display: -webkit-box;
    }
    .word-btn-list-02 li {
        height: 41px;
        line-height: 42px;
        font-size: 16px;
        margin-right: 30px;
        border-bottom: 3px solid #ffffff;
    }
    .word-btn-list-02 li.cur {
        color: #075ebb;
        border-color: #075ebb;
    }
    .view-body-content {
        padding-bottom: 22px;
    }
    .people-num-icon-02 {
        width: 16px;
        background-size: 11px;
        background-position: 0 -97px;
    }
    .box-color-02 {
        color: #ffffff;
        padding: 5px 10px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        position: absolute;
        top: 10px;
        left: 0;
    }
    .box-color-02.blue {
        background: #075ebb;
    }
    .box-color-02.red {
        background: #fc355d;
    }
    .box-color-02.green {
        background: #00af78;
    }
    .input-box-01 {
        width: 100%;
        height: 44px;
        border: 1px solid #cccccc;
        border-radius: 2px;
        font-size: 14px;
        color: #999999;
        padding: 0 9px;
        box-sizing: border-box;
        outline-color: #075ebb;
    }
    .redColor {
        color: #e61d1d;
    }
    .view-bodyContent-img{
        height: 138px;
    }
    /deep/.van-image{
        height: 100%  !important;
    }
    /deep/.van-image__img{
        border-radius: 0px !important;
    }
</style>
